import type { Component } from 'vue';
import type { CanvasComponent } from '@/stores/designStore';

// 定义编辑器类型
type EditorType = 'text' | 'number' | 'color' | 'switch' | 'select' | 'options';

// 定义属性配置项接口
export interface PropertyConfig {
  key: string;         // 对应 style 或 props 中的键名
  label: string;       // 在面板中显示的标签
  editor: EditorType;  // 使用哪种编辑器
  category: 'style' | 'props' | 'root'; // 属性属于样式还是 Props 或根属性
  options?: (string | { label: string; value: any })[]; // 用于 select 编辑器
  min?: number;        // 用于 number 编辑器
  max?: number;        // 用于 number 编辑器
  step?: number;       // 用于 number 编辑器
  defaultValue?: any; // 添加可选的默认值属性
  hasOptions?: boolean;
  defaultChildren?: Omit<CanvasComponent, 'id' | 'style' | 'children'>[];
  // 可以添加更多配置，如 placeholder, defaultValue 等
}

// 定义组件类型到其属性配置数组的映射
export type ComponentPropertyConfig = Record<string, PropertyConfig[]>;

// --- 定义各类别的基础配置 ---
// 基础根属性配置
const baseRootConfig: PropertyConfig[] = [
    { key: 'name', label: '组件名称', editor: 'text', category: 'root' },
    { key: 'visible', label: '可见性', editor: 'switch', category: 'root' },
];

// 基础样式配置 (大多数组件通用)
const baseStyleConfig: PropertyConfig[] = [
  { key: 'left', label: 'Left (px)', editor: 'number', category: 'style' },
  { key: 'top', label: 'Top (px)', editor: 'number', category: 'style' },
  { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '100px' },
  { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '32px' },
  { key: 'zIndex', label: '层级 (z-index)', editor: 'number', category: 'style' },
  { key: 'backgroundColor', label: '背景色', editor: 'color', category: 'style' },
  { key: 'color', label: '字体颜色', editor: 'color', category: 'style'},
  { key: 'borderWidth', label: '边框宽度 (px)', editor: 'number', category: 'style', min: 0 },
  { key: 'borderStyle', label: '边框样式', editor: 'select', category: 'style', options: ['none', 'solid', 'dashed', 'dotted', 'double'] },
  { key: 'borderColor', label: '边框颜色', editor: 'color', category: 'style' },
  { key: 'paddingTop', label: '内边距-上 (px)', editor: 'number', category: 'style', min: 0, defaultValue: '0px' },
  { key: 'paddingRight', label: '内边距-右 (px)', editor: 'number', category: 'style', min: 0, defaultValue: '0px' },
  { key: 'paddingBottom', label: '内边距-下 (px)', editor: 'number', category: 'style', min: 0, defaultValue: '0px' },
  { key: 'paddingLeft', label: '内边距-左 (px)', editor: 'number', category: 'style', min: 0, defaultValue: '0px' },
];

// 定义各组件特定的属性配置
const componentSpecificProps: Record<string, PropertyConfig[]> = {
  'el-button': [
    { key: 'type', label: '类型', editor: 'select', category: 'props', options: ['primary', 'success', 'warning', 'danger', 'info', 'text'], defaultValue: 'primary' },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    { key: 'plain', label: '朴素按钮', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'round', label: '圆角按钮', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'circle', label: '圆形按钮', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'buttonText', label: '按钮文字', editor: 'text', category: 'props', defaultValue: 'Button' }, // 使用 buttonText 作为 key
  ],
  'el-input': [
    { key: 'placeholder', label: '占位文本', editor: 'text', category: 'props', defaultValue: '请输入' },
    { key: 'type', label: '类型', editor: 'select', category: 'props', options: ['text', 'textarea', 'password', 'number'], defaultValue: 'text' },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'clearable', label: '可清空', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'show-password', label: '显示密码', editor: 'switch', category: 'props', defaultValue: false },
  ],
  'span': [
    { key: 'textContent', label: '文本内容', editor: 'text', category: 'props', defaultValue: '默认文本' } // 使用自定义的 textContent 来代表 span 的内容
  ],
  'el-select': [
    { key: 'placeholder', label: '占位文本', editor: 'text', category: 'props', defaultValue: '请选择' },
    { key: 'multiple', label: '多选', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'clearable', label: '可清空', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'filterable', label: '可搜索', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    { key: 'options', label: '选项数据', editor: 'text', category: 'props', defaultValue: [
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3' }
    ] },
  ],
  'el-radio': [
    { key: 'label', label: '标签值(值)', editor: 'text', category: 'props', defaultValue: '选项1' }, // radio 的值 - 这个是必填的，代表选中时的值
    { key: 'textContent', label: '显示文本', editor: 'text', category: 'props', defaultValue: '选项文本1' }, // radio 旁边显示的文本
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'border', label: '显示边框', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    // 注意：el-radio 的选中状态通常由 el-radio-group 的 v-model 控制
  ],
  'el-radio-group': [
    { key: 'modelValue', label: '绑定值 (v-model)', editor: 'text', category: 'props', defaultValue: '' },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '250px' },
    { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '80px' },
    { 
        key: 'children',
        label: '选项管理', 
        editor: 'options',
        category: 'props',
        hasOptions: true,
        defaultChildren: [
            { type: 'el-radio', props: { label: 'option1', textContent: '选项1' } },
            { type: 'el-radio', props: { label: 'option2', textContent: '选项2' } },
        ]
    }
  ],
  'el-checkbox': [
    { key: 'label', label: '标签名(显示)', editor: 'text', category: 'props', defaultValue: '选项1' }, // 现在 label 主要用于显示文本（如果不用textContent），选中值用 true/false-label
    { key: 'textContent', label: '显示文本(优先)', editor: 'text', category: 'props', defaultValue: '选项文本1' }, // 优先使用 textContent
    { key: 'true-label', label: '选中时的值', editor: 'text', category: 'props' }, // 选中时 v-model 的值 (如果不用 boolean)
    { key: 'false-label', label: '未选中时的值', editor: 'text', category: 'props' }, // 未选中时 v-model 的值 (如果不用 boolean)
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'border', label: '显示边框', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    { key: 'indeterminate', label: '不确定状态', editor: 'switch', category: 'props', defaultValue: false },
     // 注意：el-checkbox 的选中状态通常由 v-model 或 checkbox-group 控制
  ],
  'el-checkbox-group': [
      { key: 'modelValue', label: '绑定值 (v-model)', editor: 'text', category: 'props', defaultValue: [] },
      { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
      { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
      { key: 'min', label: '最小选中数', editor: 'number', category: 'props', min: 0 },
      { key: 'max', label: '最大选中数', editor: 'number', category: 'props', min: 0 },
      { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '250px' },
      { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '80px' },
      { 
          key: 'children',
          label: '选项管理', 
          editor: 'options',
          category: 'props',
          hasOptions: true,
          defaultChildren: [
              { type: 'el-checkbox', props: { label: 'option1', textContent: '选项1' } },
              { type: 'el-checkbox', props: { label: 'option2', textContent: '选项2' } },
          ]
      }
  ],
  'div': [
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '200px' },
    { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '100px' },
    { key: 'display', label: 'Display', editor: 'select', category: 'style', options: ['block', 'flex', 'inline-block', 'inline', 'none'], defaultValue: 'block' },
    { key: 'flexDirection', label: 'Flex Direction', editor: 'select', category: 'style', options: ['row', 'row-reverse', 'column', 'column-reverse'], defaultValue: 'column' },
    { key: 'justifyContent', label: 'Justify Content', editor: 'select', category: 'style', options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'], defaultValue: 'flex-start' },
    { key: 'alignItems', label: 'Align Items', editor: 'select', category: 'style', options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'], defaultValue: 'stretch' },
  ],
  'el-row': [
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '200px' },
    { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '100px' },
    { key: 'justify', label: '水平排列方式', editor: 'select', category: 'props', options: ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'], defaultValue: 'start' },
    { key: 'align', label: '垂直排列方式', editor: 'select', category: 'props', options: ['top', 'middle', 'bottom'], defaultValue: 'top' },
    { key: 'gutter', label: '栅格间隔', editor: 'number', category: 'props', min: 0, defaultValue: 0 },
  ],
  // 新增组件配置
  'el-switch': [
    { key: 'modelValue', label: '绑定值 (v-model)', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'loading', label: '加载中', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'width', label: '宽度(px)', editor: 'number', category: 'props', min: 20, defaultValue: 40 },
    { key: 'active-text', label: '打开时文字', editor: 'text', category: 'props' },
    { key: 'inactive-text', label: '关闭时文字', editor: 'text', category: 'props' },
    { key: 'active-color', label: '打开背景色', editor: 'color', category: 'props', defaultValue: '#409EFF' },
    { key: 'inactive-color', label: '关闭背景色', editor: 'color', category: 'props', defaultValue: '#C0CCDA' },
  ],
  'el-slider': [
    { key: 'modelValue', label: '绑定值 (v-model)', editor: 'number', category: 'props', defaultValue: 0 },
    { key: 'min', label: '最小值', editor: 'number', category: 'props', defaultValue: 0 },
    { key: 'max', label: '最大值', editor: 'number', category: 'props', defaultValue: 100 },
    { key: 'step', label: '步长', editor: 'number', category: 'props', min: 1, defaultValue: 1 },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'show-input', label: '显示输入框', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'show-stops', label: '显示间断点', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'range', label: '范围选择', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'vertical', label: '垂直模式', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'height', label: '高度(垂直模式)', editor: 'number', category: 'props', min: 100, defaultValue: 200 },
  ],
  'el-rate': [
    { key: 'modelValue', label: '绑定值 (v-model)', editor: 'number', category: 'props', defaultValue: 0 },
    { key: 'max', label: '最大分值', editor: 'number', category: 'props', min: 1, defaultValue: 5 },
    { key: 'disabled', label: '禁用', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'allow-half', label: '允许半选', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'show-text', label: '显示辅助文字', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'show-score', label: '显示分数', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'texts', label: '辅助文字数组', editor: 'text', category: 'props', defaultValue: "['极差', '失望', '一般', '满意', '惊喜']" },
    { key: 'score-template', label: '分数显示模板', editor: 'text', category: 'props', defaultValue: '{value}' },
    { key: 'colors', label: '图标颜色', editor: 'text', category: 'props', defaultValue: '#F7BA2A' },
    { key: 'void-color', label: '未选中颜色', editor: 'color', category: 'props', defaultValue: '#C6D1DE' },
  ],
  'el-progress': [
    { key: 'percentage', label: '百分比', editor: 'number', category: 'props', min: 0, max: 100, defaultValue: 50 },
    { key: 'type', label: '类型', editor: 'select', category: 'props', options: ['line', 'circle', 'dashboard'], defaultValue: 'line' },
    { key: 'stroke-width', label: '进度条宽度', editor: 'number', category: 'props', min: 1, defaultValue: 6 },
    { key: 'status', label: '状态', editor: 'select', category: 'props', options: ['', 'success', 'exception', 'warning'], defaultValue: '' },
    { key: 'color', label: '进度条颜色', editor: 'color', category: 'props', defaultValue: '#409EFF' },
    { key: 'show-text', label: '显示文字', editor: 'switch', category: 'props', defaultValue: true },
    { key: 'stroke-linecap', label: '线条样式', editor: 'select', category: 'props', options: ['butt', 'round', 'square'], defaultValue: 'round' },
    { key: 'width', label: '环形进度条尺寸', editor: 'number', category: 'props', min: 50, defaultValue: 126 },
  ],
  'el-card': [
    { key: 'header', label: '卡片标题', editor: 'text', category: 'props', defaultValue: '标题' },
    { key: 'shadow', label: '阴影显示时机', editor: 'select', category: 'props', options: ['always', 'hover', 'never'], defaultValue: 'always' },
    { key: 'body-style', label: '内容区域样式', editor: 'text', category: 'props', defaultValue: 'padding: 20px' },
    { key: 'textContent', label: '卡片内容', editor: 'text', category: 'props', defaultValue: '卡片内容' },
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '300px' },
    { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '200px' },
  ],
  'el-image': [
    { key: 'src', label: '图片地址', editor: 'text', category: 'props', defaultValue: 'https://placehold.co/100x100' },
    { key: 'fit', label: '适应容器方式', editor: 'select', category: 'props', options: ['fill', 'contain', 'cover', 'none', 'scale-down'], defaultValue: 'fill' },
    { key: 'alt', label: '替代文本', editor: 'text', category: 'props', defaultValue: 'image' },
    { key: 'lazy', label: '懒加载', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'preview-src-list', label: '预览图片列表', editor: 'text', category: 'props' },
    { key: 'z-index', label: '预览时z-index', editor: 'number', category: 'props', defaultValue: 2000 },
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '100px' },
    { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '100px' },
  ],
  'el-tag': [
    { key: 'type', label: '类型', editor: 'select', category: 'props', options: ['', 'success', 'warning', 'info', 'danger'], defaultValue: '' },
    { key: 'closable', label: '可关闭', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'disable-transitions', label: '禁用渐变动画', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'hit', label: '有边框描边', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'color', label: '背景色', editor: 'color', category: 'props' },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['', 'large', 'default', 'small'], defaultValue: 'default' },
    { key: 'effect', label: '主题', editor: 'select', category: 'props', options: ['light', 'dark', 'plain'], defaultValue: 'light' },
    { key: 'round', label: '圆角', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'textContent', label: '标签文本', editor: 'text', category: 'props', defaultValue: '标签文本' },
  ],
  'el-divider': [
    { key: 'direction', label: '方向', editor: 'select', category: 'props', options: ['horizontal', 'vertical'], defaultValue: 'horizontal' },
    { key: 'content-position', label: '文本位置', editor: 'select', category: 'props', options: ['left', 'right', 'center'], defaultValue: 'center' },
    { key: 'border-style', label: '分割线样式', editor: 'select', category: 'props', options: ['solid', 'dashed', 'dotted'], defaultValue: 'solid' },
    { key: 'textContent', label: '文本内容', editor: 'text', category: 'props', defaultValue: '' },
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '100%' },
  ],
  // 添加el-table组件配置
  'el-table': [
    { key: 'border', label: '带边框', editor: 'switch', category: 'props', defaultValue: true },
    { key: 'stripe', label: '斑马纹', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'size', label: '尺寸', editor: 'select', category: 'props', options: ['large', 'default', 'small'], defaultValue: 'default' },
    { key: 'show-header', label: '显示表头', editor: 'switch', category: 'props', defaultValue: true },
    { key: 'height', label: '高度(px)', editor: 'number', category: 'props' },
    { key: 'max-height', label: '最大高度(px)', editor: 'number', category: 'props' },
    { key: 'empty-text', label: '空数据提示文本', editor: 'text', category: 'props', defaultValue: '暂无数据' },
    { key: 'highlight-current-row', label: '高亮当前行', editor: 'switch', category: 'props', defaultValue: false },
    { key: 'row-key', label: '行标识键名', editor: 'text', category: 'props', defaultValue: 'id' },
    // 列和数据将由TableColumnsEditor组件处理
    { key: 'columns', label: '列配置', editor: 'text', category: 'props', defaultValue: [
      { label: 'ID', prop: 'id', width: 100, align: 'center' },
      { label: '名称', prop: 'name', width: 200, align: 'left' }
    ] },
    { key: 'data', label: '表格数据', editor: 'text', category: 'props', defaultValue: [
      { id: 1, name: '数据1' },
      { id: 2, name: '数据2' },
      { id: 3, name: '数据3' }
    ] },
    { key: 'width', label: 'Width (px)', editor: 'number', category: 'style', min: 1, defaultValue: '600px' },
    { key: 'height', label: 'Height (px)', editor: 'number', category: 'style', min: 1, defaultValue: '300px' }
  ],
};

// 定义画布特有的属性配置
const canvasConfig: PropertyConfig[] = [
  { key: 'width', label: '宽度 (px)', editor: 'number', category: 'props', min: 100, defaultValue: 800 },
  { key: 'height', label: '高度 (px)', editor: 'number', category: 'props', min: 100, defaultValue: 600 },
  { key: 'backgroundColor', label: '背景颜色', editor: 'color', category: 'props', defaultValue: '#ffffff' },
  { key: 'borderWidth', label: '边框宽度 (px)', editor: 'number', category: 'props', min: 0, defaultValue: 1 },
  { key: 'borderStyle', label: '边框样式', editor: 'select', category: 'props', options: ['none', 'solid', 'dashed', 'dotted', 'double'], defaultValue: 'solid' },
  { key: 'borderColor', label: '边框颜色', editor: 'color', category: 'props', defaultValue: '#cccccc' },
  { key: 'borderRadius', label: '圆角半径 (px)', editor: 'number', category: 'props', min: 0, defaultValue: 4 },
  { key: 'boxShadow', label: '阴影', editor: 'text', category: 'props', defaultValue: '0 4px 12px rgba(0, 0, 0, 0.1)' },
];

// 合并通用配置和特定 Props
export const propertyPanelConfig: ComponentPropertyConfig = {
  // 添加画布配置
  'canvas': canvasConfig,
};

// 先添加所有组件的基础根属性和通用样式配置
const allComponentTypes = [
  'el-button', 'el-input', 'span', 'el-radio-group', 'el-checkbox-group', 
  'el-select', 'el-row', 'div', 'el-radio', 'el-checkbox',
  // 新增组件类型
  'el-switch', 'el-slider', 'el-rate', 'el-progress', 'el-card',
  'el-image', 'el-tag', 'el-divider'
];
allComponentTypes.forEach(type => {
    propertyPanelConfig[type] = [
        ...baseRootConfig, 
        ...baseStyleConfig
    ];
});

// 再合并或覆盖特定组件的配置
for (const type in componentSpecificProps) {
    if (propertyPanelConfig[type]) {
        componentSpecificProps[type].forEach(specificConfig => {
            const existingIndex = propertyPanelConfig[type].findIndex(c => c.key === specificConfig.key && c.category === specificConfig.category);
            if (existingIndex !== -1) {
                propertyPanelConfig[type][existingIndex] = specificConfig;
                console.log(`[Config] Overriding ${type}.${specificConfig.category}.${specificConfig.key}`);
            } else {
                propertyPanelConfig[type].push(specificConfig);
            }
        });
    } else {
        propertyPanelConfig[type] = componentSpecificProps[type];
    }
}

// --- 编辑器组件映射 --- 
// 创建一个映射，将 editor 类型字符串映射到实际的 Vue 组件
// 注意：需要在 RightPanel.vue 中导入这些组件

export const editorComponentMap: Record<EditorType, Component | string> = {
    text: 'el-input', // 使用字符串名称，假设 Element Plus 已全局注册
    number: 'el-input-number',
    color: 'el-color-picker',
    switch: 'el-switch',
    select: 'el-select',
    options: 'OptionsEditor', // Use a placeholder name for the custom options editor component
};

// 辅助函数：获取组件的配置
export const getComponentConfig = (type: string): PropertyConfig[] => {
    return propertyPanelConfig[type] || [];
}; 